<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/userProfiles.css">
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script>
        $(function () {
            /*获取用户id*/
            var userId = getParams().id;
            /*获取当前登陆用户信息*/
            var loginUser = JSON.parse(sessionStorage.getItem("user"));
            $.get("/users", {id: userId}, function (data) {
                $(".name").html(data.nickName);
                /*渲染用户信息界面*/
                $(".info").renderValues(data);
                $("#pills-tab").renderValues(data);
                $(".bg").css("background-image", "url(" + data.coverImgUrl + ")");
            });
            var followBtn = $("#followBtn");

            /*如果登陆,判断是否已关注*/
            if (loginUser) {
                $.get("/addFriend", {userId: userId, followedId: loginUser.id}, function (data) {
                    /*已关注*/
                    if (data) {
                        followBtn.html("已关注");
                        followBtn.css("border-color", "white");
                        followBtn.css("color", "white");
                        followBtn.css("background", "transparent");
                    }
                });
            }


            var action;
            /*点击关注按钮*/
            followBtn.click(function () {
                /*判断是否登陆*/
                if (!loginUser) {
                    location.href = "/login.html";
                    return;
                }
                if (followBtn.html() === "+关注") {
                    followBtn.html("已关注");
                    followBtn.css("border-color", "white");
                    followBtn.css("color", "white");
                    followBtn.css("background", "transparent");
                    action = "addFriend";

                } else {
                    followBtn.html("+关注");
                    followBtn.css("color", "black");
                    action = "delFriend";
                }
                /*发送请求到后端*/
                $.post("/addFriend", {userId: userId, followedId: loginUser.id, action: action}, function (data) {
                    var fans = $(".fansBtn").html();
                    if (action == "addFriend") {
                        $(".fansBtn").html(parseInt(fans) + 1);
                    } else {
                        $(".fansBtn").html(fans - 1);
                    }
                });
            });

            /*点击关注的数字,跳转到该用户关注的用户页面*/
            $(".followsBtn").attr("href", "/userFollows.html?id=" + userId);
            /*点击粉丝的数字,跳转到该用户的粉丝页面*/
            $(".fansBtn").attr("href", "/userFans.html?id=" + userId);

            /*点击私信按钮*/
            $("#letterBtn").click(function () {
                /*判断是否登陆*/
                if (!loginUser) {
                    location.href = "/login.html";
                    return;
                } else {
                    /*姓名赋值 给某某 发送消息*/
                    $("#nickName").html($(".name").html());
                    $("#editForm :input").val("");
                    $("#inputModal").modal("show");
                }
            });

            /*发送私信*/
            $(".submitBtn").click(function () {
                /*校验私信是否为空*/
                if($("#content").val()=="小雪很白白"){
                    $(document).dialog({
                        style: "IOS",
                        titleShow: false,
                        content: "一派胡言!!!",
                        autoClose: 1000
                    });
                    return;
                }
                else
                if ($("#content").val()) {
                    $("#senderId").val(loginUser.id);
                    $("#editForm input[name=receiverId]").val(userId);
                    $("#editForm").ajaxSubmit(function (data) {

                        if (data.success) {
                            $(document).dialog({
                                style: "IOS",
                                titleShow: false,
                                content: "发送成功",
                            });
                            location.reload();
                        }
                    });
                } else {
                    $(document).dialog({
                        style: "IOS",
                        titleShow: false,
                        content: "私信内容不能为空!",
                        autoClose: 500
                    });
                }
            });

            var travelCurrentPage = 1;
            var travelPages;
            var travels;
            /*查询当前用户所有游记*/
            $.get("/users/" + userId + "/travels", function (data) {
                travelPages = data.pages;
                travels = data.list;
                console.log(travels);
                renderViews($("#travels"), {list: travels}, "travelContent.html?id=")
            });

            /*查询当前用户所有点评*/
            var commentCurrentPage = 1;
            var commentPages;
            var comments;
            $.get("/users/" + userId + "/comments", function (data) {
                commentPages = data.pages;
                comments = data.list;
                renderComment($("#comments"), {list: comments});
            });

            var collectCurrentPage = 1;
            var collectPages;
            var collects;
            /*查询当前用户所有收藏*/
            $.get("/users/" + userId + "/collects", function (data) {
                collectPages = data.pages;
                collects = data.list;
                /*把type和collectId封装到同一个数组*/
                $.map(collects, function (ele, index) {
                    ele.arrs = [ele.collectId, ele.type];
                    return ele;
                });
                renderCollect($("#collects"), {list: collects});
            });


            /*滑动屏幕*/
            $(window).scroll(function () {
                /*判断是否到底*/
                if (isEnd()) {
                    /*如果是游记选项卡*/
                    if ($("#travels").hasClass("active")) {
                        if (travelCurrentPage < travelPages) {
                            travelCurrentPage++;
                            $.get("/users/" + userId + "/travels", {currentPage: travelCurrentPage}, function (data) {
                                travels = $.merge(travels, data.list);
                                renderViews($("#travels"), {list: travels}, "travelContent.html?id=")
                            });

                        } else {
                            $(document).dialog({
                                type: "notice",
                                infoText: "没有更多了",
                                autoClose: 1000,
                                position: "center"
                            });
                        }
                    }
                    /*如果是收藏选项卡*/
                    else if ($("#collects").hasClass("show")) {
                        if (collectCurrentPage < collectPages) {
                            collectCurrentPage++;
                            $.get("/users/" + userId + "/collects", {currentPage: collectCurrentPage}, function (data) {
                                collects = $.merge(collects, data.list);
                                /*把type和collectId封装到同一个数组*/
                                $.map(collects, function (ele, index) {
                                    if(ele.collectId){
                                        ele.arrs = [ele.collectId, ele.type];
                                        return ele;
                                    }

                                });
                                renderCollect($("#collects"), {list: collects});
                            });

                        } else {
                            $(document).dialog({
                                type: "notice",
                                infoText: "没有更多了",
                                autoClose: 1000,
                                position: "center"
                            });
                        }
                    }

                    /*如果是点评选项卡*/
                    else  {
                        if (commentCurrentPage < commentPages) {
                            commentCurrentPage++;
                            $.get("/users/" + userId + "/comments", {currentPage: commentCurrentPage}, function (data) {
                                console.log(data);
                                comments = $.merge(comments, data.list);
                                renderComment($("#comments"), {list: comments});
                            });
                        } else {
                            $(document).dialog({
                                type: "notice",
                                infoText: "没有更多了",
                                autoClose: 1000,
                                position: "center"
                            });
                        }
                    }
                }
            });

            /*渲染界面*/
            function renderViews(ele, data, html) {
                ele.renderValues(data, {
                    handle: function (ele, value) {
                        ele.href = html + value;
                    }
                });
            }
            /*渲染点评界面*/
            function renderComment(ele, data) {
                ele.renderValues(data, {
                    handle: function (ele, value) {
                        ele.href = "/userProfiles.html?id=" + value;
                    },
                    strategyHandle:function (ele,value) {
                        ele.href="/strategyCatalogs.html?strategyId="+value;
                    },commentHandle:function (ele,value) {
                        ele.href="/strategyComment.html?id="+value;
                    },starHandle:function (ele,value) {
                        if(value==5){
                            $("<i class='fa fa-star'><i class='fa fa-star'><i class='fa fa-star'><i class='fa fa-star'><i class='fa fa-star'>").appendTo($(ele));
                        }else if(value==4) {
                            $("<i class='fa fa-star'><i class='fa fa-star'><i class='fa fa-star'><i class='fa fa-star'><i class='fa fa-star-o'>").appendTo($(ele));
                        }else if(value==3) {
                            $("<i class='fa fa-star'><i class='fa fa-star'><i class='fa fa-star'><i class='fa fa-star-o'><i class='fa fa-star-o'>").appendTo($(ele));
                        }else if(value==2) {
                            $("<i class='fa fa-star'><i class='fa fa-star'><i class='fa fa-star-o'><i class='fa fa-star-o'><i class='fa fa-star-o'>").appendTo($(ele));
                        }else if(value==1) {
                            $("<i class='fa fa-star'><i class='fa fa-star-o'><i class='fa fa-star-o'><i class='fa fa-star-o'><i class='fa fa-star-o'>").appendTo($(ele));
                        }else if(value==0) {
                            $("<i class='fa fa-star-o'><i class='fa fa-star-o'><i class='fa fa-star-o'><i class='fa fa-star-o'><i class='fa fa-star-o'>").appendTo($(ele));
                        }
                    }
                });
            }

            /*渲染收藏界面*/
            function renderCollect(ele, data) {
                ele.renderValues(data, {
                    handle: function (ele, value) {
                        if(value){
                            /*根据type渲染a链接*/
                            if (value[1] == 1) {
                                ele.href = "/newsContent.html?id=" + value[0];
                            } else if (value[1] == 2) {
                                ele.href = "/strategyCatalogs.html?strategyId=" + value[0];

                            } else if (value[1] == 3) {
                                ele.href = "/travelContent.html?id=" + value[0];
                            }
                        }


                    }
                });
            }


            /*鼠标悬停事件*/
            followBtn.hover(function () {
                if (followBtn.html() == "已关注") {
                    followBtn.html("取消关注");
                    followBtn.css("background", "white");
                    followBtn.css("color", "black");
                }
            }, function () {
                if (followBtn.html() === "+关注") {
                    followBtn.html("+关注")
                    return;
                }
                followBtn.html("已关注")
                followBtn.css("background", "transparent");
                followBtn.css("color", "white");
            });
        })
    </script>

</head>
<body>
<div class="container bg">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <a class="followsBtn" render-html="followCount"></a>
                    </div>
                    <div>
                        <span>关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <a class="fansBtn" render-html="fansCount"></a>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div class="col">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn  ibtn " id="followBtn">+关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active show " id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span render-html="travelCount"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span render-html="commentCount"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#collects">
                TA的收藏[<span render-html="collectCount"></span>]
            </a>
        </li>
    </ul>


    <div class="container tab-content" id="pills-tabContent">

        <div class="tab-pane fade show active" id="travels">
            <dl class="list" render-loop="list">
                <dd>
                    <a render-key="list.id" render-fun="handle">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>
                            <span class="span-right">
						 				<span render-html="list.praiseNum"></span> <i class="fa fa-thumbs-o-up" style="color: #abdde5"></i></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>


        <div class="comment tab-pane fade " id="comments">
            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <a render-key="list.user.id" render-fun="handle">
                        <img class="rounded-circle" width=60px height="60px" render-src="list.user.headImgUrl">
                            <p ><span  render-html="list.user.nickName"></span></p>
                        </a>
                    </div>
                    <div class="col">
                        <span class="comment-star " render-key="list.star" render-fun="starHandle">
                        </span>

                        <span class="comment-date" render-html="list.releaseTime"></span>
                        <div class="comment-content">
                            <a render-key="list.id" render-fun="commentHandle">
                                <p render-html="list.content"></p>
                            </a>
                        </div>
                            <ul class="comment-img" render-loop="list.imgList">
                                <li>
                                    <img render-src="list.imgList.customImgUrl">
                                </li>
                            </ul>

                        <div class="comment-link">
                            <a  render-key="list.strategy.id" render-fun="strategyHandle">
                                <img render-src="list.strategy.coverUrl"> <span
                                    render-html="list.strategy.title"></span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

        </div>


        <div class="tab-pane fade" id="collects">
            <dl class="list" render-loop="list">
                <dd>
                    <a render-key="list.arrs" render-fun="handle">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>
                            <span class="span-right"><span render-html="list.typeName"></span>
						 				</span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

    </div>
</div>

<!--发送私信模态框-->
<div id="inputModal" class="modal modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    给<strong id="nickName" style="color: #ff8a00"></strong>发送消息
                </div>

            </div>

            <div class="modal-body">
                <form id="editForm" class="form-horizontal" method="post" style="width: 400px"
                      action="/privateMessages">
                    <input type="hidden" name="sender.id" id="senderId">
                    <input type="hidden" name="receiverId">
                    <div>
                        <div class="col-sm-6" align="center">
                            <textarea style="width: 300px;height: 120px;background-color: #efefef"
                                      name="content" id="content"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn  submitBtn btn-sm" style="background-color:#ff8a00 "
                        aria-hidden="true">发送
                </button>
                <a class="btn  btn-sm" data-dismiss="modal" aria-hidden="true" style="background-color:  #efefef">关闭</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>